<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: TaoSheng
  Date: 2022/10/11
  Time: 18:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>more_products</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/more_products.css">
  <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="header">
  <div class="header-nav">
    <div class="header-logo">
      <img src="${pageContext.request.contextPath}/images/首页.svg"/>
      <a href="" >首页</a>
    </div>
    <span class="layui-breadcrumb" lay-separator="|">
                                    <a href="">登录</a>
                                    <a href="">免费注册</a>
                                    <a href="">个人中心</a>
                                    <a href="">我的订单</a>
                </span>
  </div>
  <div class="header-content">
    <!-- logo -->
    <div class="logo-img">
      <img src="${pageContext.request.contextPath}/images/logo.jpg"/>
      <span>更多好物</span>
    </div>
    <!-- 搜索 -->
    <div class="searchDept">
      <form action="http://localhost:8081/demo/getByName" method="get">
        <input type="hidden" name="pageNum" value="1">
        <input class="search" name="search" type="text" placeholder="请输入您需要搜索的商品" value="${search}">
        <button href="" class="searchBtn">搜索</button>
        <%--            product_show/more_products.jsp--%>
      </form>
    </div>
    <a href="" class="myCart">
      <img src="${pageContext.request.contextPath}/images/shopcar.svg" />
      <span>购物车</span>
    </a>
  </div>
  <!-- 页面导航栏 -->
  <div class="page-nav">
    <a href="${pageContext.request.contextPath}/index.jsp" class="seckill">秒杀商品</a>
    <a href="more_products.html" class="BarPrice">更多好物</a>
  </div>
</div>
<!--预购页面主体部分-->
<div class="mianPart">
  <div class="classify">
    <span>商品分类:</span>
    <div class="chose-filter"></div>
  </div>
  <div class="filter">
    <div class="left-nav">
      <span class="rough-filter">电子产品：</span>
      <span class="rough-filter">生活：</span>
      <span class="rough-filter">图书：</span>
      <span class="rough-filter">食品：</span>
    </div>
    <div class="right-nav">
      <div class="detail-filter">
        <a href="">手机</a>
        <a href="">数码</a>
        <a href="">电脑办公</a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
      </div>
      <div class="detail-filter">
        <a href="clothes_show.html">服饰</a>
        <a href="">家用电器</a>
        <a href="">厨具</a>
        <a href="">运动健康</a>
        <a href=""></a>
        <a href=""></a>
      </div>
      <div class="detail-filter">
        <a href="">数字杂志</a>
        <a href="">少儿图书</a>
        <a href="">工具书</a>
        <a href="">中小学教材</a>
        <a href="">小说类</a>
        <a href=""></a>
      </div>
      <div class="detail-filter">
        <a href="">进口食品</a>
        <a href="">地方特产</a>
        <a href="">休闲食品</a>
        <a href="">烹饪调料</a>
        <a href="">名茶</a>
        <a href=""></a>
      </div>
    </div>
  </div>
  <div class="pro-show">
    <ul>
      <%--<li>
        <div class="pro-info">
          <a class="pro-img" href="">
            <img src="${pageContext.request.contextPath}/images/more_product_img2.jpg"/>
          </a>
          <div class="pro-price">
            <span>￥</span>
            <span class="number">540.00</span>
          </div>
          <a class="pro-intro" href="">伊芙丽连衣裙女2022夏新款气质小白裙v领泡泡袖长裙 米白 155/80A/S</a>
          <div class="tag">
            <span>纽扣</span>
            <span>百搭</span>
            <span>中长裙</span>
            <span>纯色</span>
          </div>
          <div class="comment">
            <a class="comment-number" href="">1</a>
            <span>条评价</span>
          </div>
          <div class="shopName">伊芙丽官方旗舰店</div>
          <div class="coupon-type">
            <span>券300-100</span>
            <span>2件九折</span>
          </div>
        </div>
      </li>--%>

      <c:forEach var="pro" items="${pros}">
        <li>
          <input type="hidden" name="proid" value="${pro.id}">
          <div class="pro-info">
            <a class="pro-img" href="">
              <img src="${pageContext.request.contextPath}/images/more_product_img2.jpg"/>
<%--                ${pageContext.request.contextPath}/${pro.productMainImg}--%>
            </a>
            <div class="pro-price">
              <span>￥</span>
              <span class="number">${pro.productPrice*1.00}</span>
            </div>
            <a class="pro-intro" href="">${pro.productName}${pro.productType}${pro.productSize}</a>
            <div class="tag">
              <span>${pro.productBrand}</span>
<%--              <span>${pro.productArea}</span>--%>
              <span>${pro.productColor}</span>
              <span>${pro.productPoint}</span>
            </div>
            <div class="comment">
              <a class="comment-number" href="">${pro.xx}</a>
              <span>条评价</span>
            </div>
            <div class="shopName">伊芙丽官方旗舰店</div>
            <div class="coupon-type">
              <span>满300减100</span>
            </div>
          </div>
        </li>
      </c:forEach>

    </ul>
    <div class="page-change">
      <div class="page-total">
        <span>共</span>
        <span class="data">${pagecount}</span>
        <span>页</span>
        <span>/</span>
        <span class="data">${count}</span>
        <span>件商品</span>
      </div>
<%--       id="page"--%>
      <div >

        <a href="http://localhost:8081/demo/getByName?pageNum=${pageNum-1}&search=${search}">上一页</a>

        当前是第${pageNum}页

        <a href="http://localhost:8081/demo/getByName?pageNum=${pageNum+1}&search=${search}">下一页</a>

    </div>
  </div>
</div>
<!-- 页面底部 -->
<div class="footer">
  <img src="${pageContext.request.contextPath}/images/bottom.png"/>
</div>




<script src="${pageContext.request.contextPath}/js/more_products.js"></script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<%--<script>
  layui.use(['laypage', 'layer'], function(){
    var laypage = layui.laypage
            ,layer = layui.layer;
    laypage.render({
      elem: 'page'
      ,count: ${count}  //80
      ,theme: '#DC143C'
    });

    //调用分页
    laypage.render({
      elem: 'demo20'
      ,count: data.length
      ,jump: function(obj){
        //模拟渲染
        document.getElementById('biuuu_city_list').innerHTML = function(){
          var arr = []
                  ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
          layui.each(thisData, function(index, item){
            arr.push('<li>'+ item +'</li>');
          });
          return arr.join('');
        }();
      }
    });

  });
</script>--%>
</body>
</html>